<template>
  <!-- 绩效统计 -->
  <div class="performance-page-index">
    <!-- 页面标题 -->
    <div class="container-box">
      <div class="main-title">绩效统计</div>
      <!-- 页面主体 -->
      <div class="main-content">
        <!-- 过滤搜索 -->
        <div class="query-box">
          <el-form
            ref="queryForm"
            inline
            label-position="right"
            label-width="100px"
            :model="queryForm"
            :rules="queryFormRules"
            size="small"
          >
            <el-row>
              <el-form-item label="项目名称">
                <el-input
                  v-model="queryForm.name"
                  maxlength="16"
                  placeholder="请输入项目名称"
                />
              </el-form-item>
              <el-form-item label="项目性质">
                <el-select
                  v-model="queryForm.nature"
                  placeholder="请选择项目性质"
                >
                  <el-option
                    v-for="item in reviewNature"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目单位">
                <el-select
                  v-model="queryForm.company"
                  placeholder="请选择项目单位"
                >
                  <el-option
                    v-for="dict in deptList"
                    :key="dict"
                    :label="dict"
                    :value="dict"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目类别">
                <el-select
                  v-model="queryForm.type"
                  placeholder="请选择项目类别"
                >
                  <el-option
                    v-for="item in reviewType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="年度计划名称">
                <el-input
                  v-model="queryForm.annualProjectPlanName"
                  maxlength="16"
                  placeholder="请输入年度计划名称"
                />
              </el-form-item>
              <el-form-item style="margin-left: 30px">
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  @click="handleQuery"
                >
                  查询
                </el-button>
                <el-button icon="el-icon-refresh-right" @click="resetQuery">
                  重置
                </el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="box-content">
      <div class="table-box">
        <div class="exportBtn">
          <span>已选择{{this.checkedData.length}}个项目</span>
          <el-button @click="exportClick" v-hasPermi="['performance:statistics:exportSelect']">导出勾选绩效</el-button>
          <el-button type="primary" @click="handleExportAll" v-hasPermi="['performance:statistics:exportAll']">导出全部</el-button>
        </div>
        <!-- 数据表格 -->
        <vxe-table
          ref="table"
          border
          cell-class-name="table-cell"
          class="list-table"
          :data="tableData"
          header-cell-class-name="table-header-cell"
          header-row-class-name="table-header"
          :loading="loading"
          show-header-overflow="ellipsis"
          show-overflow="tooltip"
          @checkbox-change="changeBox"
          @checkbox-all="selectAll"
        >
          <vxe-table-column
            v-for="item in tableColumn"
            :key="item.field"
            v-bind="item"
          />
          <vxe-table-column header-align="center" title="操作" width="200">
            <template #default="{ row }">
              <template>
                <el-button
                  class="btn-text"
                  size="small"
                  type="text"
                  @click="handleClick(row.projectId)"
                >
                  查看
                </el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryForm.pageSize"
      >
      </el-pagination>
      <el-dialog
        title="项目概览"
        :visible.sync="showDialog"
        width="1254px"
        :before-close="handleClose"
        top="12"
      >
        <div class="dialog-box performance-dialog">
          <div class="score-performance">
            <span>绩效评分</span><span><span>{{score}}分</span>/5.0分</span>
          </div>
        </div>
        <vxe-table
          ref="tableDialog"
          border
          cell-class-name="table-cell"
          class="list-table"
          :data="tableDialog"
          header-cell-class-name="table-header-cell"
          header-row-class-name="table-header"
          :loading="dialogLoading"
          show-header-overflow="ellipsis"
          show-overflow="tooltip"
        >
          <vxe-table-column
            v-for="item in dialogColumn"
            :key="item.field"
            v-bind="item"
          />
        </vxe-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm">导 出</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getStatisticsList ,exportTable,getAverageScore} from "@/api/manage/messsage";
import { listDept } from "@/api/system/dept";
export default {
  data() {
    return {
      // 查询参数
      queryForm: {
        pageSize: 10,
        pageNum: 1,
      },
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
      loading: false,
      dialogLoading: false,
      tableData: [],
      tableDialog: [],
      total: 0,
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      tableColumn: [
        { type: "checkbox", width: "60" },
        { title: "项目名称", field: "name" },
        { title: "项目单位", field: "company" },
        {
          title: "项目性质",
          field: "nature",
          formatter: ({ cellValue }) => {
            return cellValue == 0 ? "年度项目" : "增补项目";
          },
        },
        {
          title: "项目类别",
          field: "type",
          formatter: ({ cellValue }) => {
            return cellValue === '0'
              ? "建设类（新开工）"
              : cellValue === '1'
              ? "建设类（续建）"
              : cellValue === '2'
              ? "购买服务类"
              : cellValue === '3'
              ? "运维类"
              : "其他";
          },
        },
        { title: "考核结束时间", field: "endTime" },
        { title: "年度计划名称", field: "annualProjectPlanName" },
        { title: "绩效分数", field: "performanceScore" },
      ],
      dialogColumn: [
        { type: "seq", width: "60", title: "序号" },
        { title: "项目名称", field: "name" },
        { title: "项目单位", field: "company" },
        {
          title: "项目性质",
          field: "nature",
          formatter: ({ cellValue }) => {
            return cellValue == 0 ? "年度项目" : "增补项目";
          },
        },
        {
          title: "项目类别",
          field: "type",
          formatter: ({ cellValue }) => {
            return cellValue === '0'
              ? "建设类（新开工）"
              : cellValue === '1'
              ? "建设类（续建）"
              : cellValue === '2'
              ? "购买服务类"
              : cellValue === '3'
              ? "运维类"
              : "其他";
          },
        },
        { title: "考核时间", field: "endTime" },
        { title: "绩效分数", field: "performanceScore" },
      ],
      reviewNature: [
        {
          label: '年度项目',
          value: '0'
        },
        {
          label: '增补项目',
          value: '1'
        }
      ],
      reviewType: [
        {
          label: '建设类（新开工）',
          value: '0'
        },
        {
          label: '建设类（续建）',
          value: '1'
        },
        {
          label: '购买服务类',
          value: '2'
        },
        {
          label: '运维类',
          value: '3'
        },
        {
          label: '其他',
          value: '4'
        },
      ],
      checkedData: [], //选中的数据
      showDialog: false, //弹框显示
      deptList: [],
      projectIds:[],//选择数据的id
      score:0,//绩效分数
    };
  },
  methods: {
    /** 查询部门列表 */
    getDepartmentList() {
      this.deptList = []
      listDept(this.queryParams).then((res) => {
        res.data.forEach((item) => {
          this.deptList.push(item.deptName)
        })
      });
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getList();
    },
    handleClick(val) {
      this.$router.push(
        "/business_manage/performanceStatistics/details?id=" + val
      );
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryForm = {
        pageSize: 10,
        pageNum: 1,
        taskName: "",
        reviewType: "",
        extractTime: "",
        expertStatus: "",
      };
      this.getList();
    },
    getList() {
      getStatisticsList(this.queryForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    //选择列表
    changeBox({ checked, records, row }) {
      console.log(checked, records, row);
      this.checkedData = records;
    },
    selectAll({ checked, records, row }){
      this.checkedData = records;
    },
    //关闭弹窗
    handleClose() {
      this.showDialog = false;
    },
    //提交导出勾选
    submitForm() {
      exportTable({
        projectIds: this.projectIds
      }).then((isSuccess) => {
        if (isSuccess) this.showDialog = false
      })
    },
    //导出按钮
    exportClick() {
      if(this.checkedData.length>0){
        this.showDialog = true;
        this.tableDialog = this.checkedData;
        let ids=[]
        this.tableDialog.map(item =>{
          ids.push(item.projectId)
        })
        this.projectIds=ids

        getAverageScore({proIds:this.projectIds.join()}).then(res =>{
            this.score=res
        })
      }else{
        this.$message.error('请先选择数据后导出')
      }
    },
    handleExportAll() {
      this.$confirm(`是否导出全部,共${this.total}条数据?`, "导出", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(() => {
          return exportTable({
            ...this.queryForm
          });
        })
    },
  },
  created() {
    this.getList();
    this.getDepartmentList();
  },
};
</script>

<style lang="scss" scoped>
.performance-page-index {
  width: 100%;
  padding: 16px;
  height: 100%;
  background: #f5f5f5;
  .container-box {
    // width: 1688px;
    background: #fff;
    .main-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      padding: 24px;
    }
  }
  .box-content {
    background: #fff;
    margin-top: 10px;
    padding-bottom: 40px;
    .table-box {
      margin: 25px 0;
      // width:1600px;
      padding: 24px;
      .exportBtn {
        margin: 12px 0 24px;
        span {
          display: inline-block;
          margin-right: 12px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #333333;
        }
        .el-button {
          width: 116px;
          height: 32px;
          background: #ffffff;
          border: 1px solid #3171ee;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: CENTER;
          color: #3171ee;
          padding: 0;
        }
      }
      .state-span {
        display: flex;
        align-items: center;
        .out-line {
          display: inline-block;
          width: 16px;
          height: 16px;
          // opacity: 0.1;
          background: rgba(49, 113, 238, 0.1);
          border-radius: 16px;
          margin-right: 10px;
          span {
            margin: 4px;
            width: 7px;
            height: 7px;
            background: #3171ee;
            border-radius: 16px;
            display: inline-block;
          }
        }
      }
    }
    .el-pagination {
      text-align: center;
      margin-top: 40px;
    }
  }
}
.number-box {
  display: flex;
  width: 218px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
.rule-input {
  border: 0 !important;
}
.performance-dialog {
  margin-bottom: 20px;
  .score-performance{
    display: flex;
    align-items: center;
  }
  & > div {
    height: 48px;
    & > span {
      display: inline-block;
      line-height: 48px;
      width: 892px;
      height: 48px;
      border: 1px solid #e6e6e6;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
    }
    & > :first-child {
      width: 266px;
      height: 48px;
      background: #fafafa;
      text-align: center;
      border-right: 0;
    }
    & > :last-child {
      text-indent: 24px;
      color: #d8d8d8;
      span {
        color: #3171ee;
      }
    }
  }
}
</style>


<style >
.performance-page-index .el-form-item .el-input__inner {
  width: 252px;
}
.performance-page-index .el-dialog__body {
  border-top: 1px solid #ebecef;
  padding: 24px 48px;
}
.rule-input .el-input__inner {
  border: 0 !important;
  width: 100px;
}
</style>